<template>
  <div>
    <group label-width="100px" label-margin-right="15px" label-align="left">
      <x-input title='手机号码:' type="tel" :max="11" is-type="china-mobile"
               keyboard="number" ref="phoneNumber" v-model="forget.phoneNumber"
               @on-blur="checkPhoneNumber" required>
      </x-input>
      <x-input title="验证码:" class="weui-cell_vcode" v-model="verCode" required novalidate :icon-type="iconType">
        <img slot="right" class="weui-vcode-img" :src="verCodeData" @click="getverCode" alt="看不清，换一张">
      </x-input>
      <x-input title="手机验证码" class="weui-vcode" v-model="forget.smsCode">
        <x-button slot="right" type="primary" mini @click.native="SendSMS" :disabled="disabledSend"
                  style="padding-right: 30px;">
          发送验证码


        </x-button>
        <span slot="right" style="position: relative;">
            <countdown v-model="countdownTime" :start="countdownStart" @on-finish="finish"
                       class="countdownTime"></countdown>
          </span>
      </x-input>
      <x-input title='新密码:' v-model="forget.passWord01" @on-blur="checkPassWord01" type="password"></x-input>
      <x-input title='确认密码:' v-model="forget.passWord02" @on-blur="checkPassWord02" type="password"></x-input>
    </group>

    <div class="btn-box" style="margin-top: 30px;">
      <x-button type="primary" @click.native="goForget">确定</x-button>
    </div>
    <div v-transfer-dom>
      <alert v-model="alertShow" title="提示"> {{ alertMessage }}</alert>
    </div>

    <toast v-model="showPositionValue" type="cancel" :text="toastText" width="10em"></toast>
  </div>
</template>
<script type="text/ecmascript-6">
  import {XButton, Group, XInput, Alert, Toast, TransferDomDirective as TransferDom, Countdown} from 'vux'
  import Guid from './js/guid'
  import getSource from './js/getSource'
  export default {
    data(){
      return {
        verCode: '',//验证码
        vguid: '',//验证码随机数
        verCodeData: '',//验证码图
        iconType: '',
        forget: {
          phoneNumber: '',
          passWord01: '',
          passWord02: '',
          openId: '',
          source: '',
          smsCode: ''
        },
        disabledSend: false,
        countdownTime: 120,
        countdownStart: false,
        alertShow: false,
        alertMessage: '',
        toastText: '',
        showPositionValue: false
      }
    },
    watch: {
      verCode: function () {
        let _self = this;
        let apiurl = global.baseApiUrl + "/base/captcha/verify/" + _self.vguid + '/' + this.verCode;
        this.axios.post(apiurl).then(function (res) {
          if (res.data.succ == true) {
            _self.iconType = 'success'
          } else {
            _self.iconType = 'error'
          }
        })
      }
    },
    created() {
      this.getverCode();
      this.forget.source = getSource();
    },
    methods: {
      //check 电话号码
      checkPhoneNumber(){
        if (!this.$refs.phoneNumber.valid) {
          this.alertShow = true;
          this.alertMessage = '手机号码不正确！';
        }
      },
      //短信发送
      SendSMS() {
        if (this.$refs.phoneNumber.valid && this.iconType == 'success') {
          this.countdownStart = true;
          this.disabledSend = true;
          let _self = this;
          let apiurl = global.baseApiUrl + "/member/user/sendsms"; //短信接口要不对，
          this.axios({
            method: 'post',
            url: apiurl,
            data: {
              phone: _self.forget.phoneNumber,
              verCodeKey: _self.vguid,
              verCode: _self.verCode
            }
          }).then(function (response) {
            _self.getverCode();
            _self.verCode = '';
            _self.iconType = '';
            if (response.data.succ) {
              _self.alertShow = true;
              _self.alertMessage = '短信已发送！';
            } else {
              if (response.data.code == 211003) {
                _self.showMsg("图片验证码不正确");
              } else if (response.data.code == 915001) {
                _self.showMsg("短信发送失败");
              } else {
                _self.showMsg(response.data.msg);
              }
              _self.finish();
            }
          }).catch(function (response) {
          });
        } else {
          this.alertShow = true;
          this.alertMessage = '请正确填写手机号码和验证码！';
        }
      },
      finish (index) {
        this.disabledSend = false;
        this.countdownStart = false;
        this.countdownTime = 120;
      },
      //获取图片验证码
      getverCode: function () {
        let _self = this;
        _self.vguid = new Guid().newGUID();
        var apiurl = global.baseApiUrl + '/member/vercode/' + _self.vguid;
        this.axios({
          method: 'post',
          url: apiurl
        }).then(function (response) {
          _self.verCodeData = "data:image/png;base64," + response.data.data;
        }).catch(function (response) {
        });
      },
      checkPassWord01(){
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/g.test(this.forget.passWord01);
        if (!reg) {
          this.forget.passWord01 = '';
          this.alertShow = true;
          this.alertMessage = '密码必须是数字和字母的组合，并不少于6位';
          return false;
        }
      },
      checkPassWord02(){
        if (this.forget.passWord02 != this.forget.passWord01) {
          this.forget.passWord02 = '';
          this.alertShow = true;
          this.alertMessage = '密码必须相同';
          return false;
        }
      },
      goForget(){
        let _self = this;
        this.axios({
          method: 'put',
          url: global.baseApiUrl + '/member/forget',
          data: {
            acountId: _self.forget.phoneNumber,
            newpassword: _self.forget.passWord01,
            smscode: _self.forget.smsCode
          }
        })
          .then(function (response) {
            console.log(response.data);
            if (response.data.code == 212001) {
              _self.alertShow = true;
              _self.alertMessage = '修改成功！';
              setTimeout(function () {
                _self.$router.replace({path: '/login'}); //登录成功2s后，则跳转到登录页
              }, 2000)
            } else {
              if (response.data.code == 211013) {
                _self.showMsg("短信验证码不正确");
              } else {
                _self.showMsg(response.data.msg);
              }
            }
          })
          .catch(function (response) {
            console.log(response);
          });
      },
      showMsg (msg) {
        this.showPositionValue = true;
        this.toastText = msg;
      }
    },
    components: {
      XButton,
      Group,
      XInput,
      Alert,
      Countdown,
      Toast
    },
    directives: {
      TransferDom
    }
  }
</script>
<style lang="less" scoped>
  .countdownTime {
    position: absolute;
    left: -26px;
    color: #fff;
    font-size: 14px;
    top: 3px;
  }
</style>
